import React, { Component } from 'react'
import { Link } from 'react-router-dom';
import qs from 'querystringify';

export default class Page extends Component {
  getString(search) {
    return qs.stringify(search)
  }
  render() {
    const pathname = this.props.pathname,
    search = this.props.search,
    prev = pathname + '?' + this.getString(Object.assign({}, search, {page: this.props.page - 1})),
    next = pathname + '?' + this.getString(Object.assign({}, search, {page: this.props.page + 1}))
    console.log(prev)
    return (
      <div>
        {
          this.props.pages > 1 ? (
            <ul className="pagination justify-content-end">
              {
                this.props.page > 1 ? (
                  <li className="page-item">
                    <Link className="page-link" to={pathname + '?' + prev} aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span className="sr-only">Previous</span>
                    </Link>
                  </li>
                ) : null
              }
              {
                Array.from({length: this.props.pages}).map((item, i) => {
                  const current = Object.assign({}, search, {page: ++i}),
                  path = pathname + '?' + this.getString(current)
                  return (
                    <li className="page-item" key={i}><Link className={`page-link ${i === this.props.page ? 'active' : ''}`} to={path}>{i}</Link></li>
                  )
                })
              }
              {
                this.props.page < this.props.pages ? (
                  <li className="page-item">
                    <Link className="page-link" to={pathname + '?' + next} aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                      <span className="sr-only">Next</span>
                    </Link>
                  </li>
                ) : null
              }
            </ul>
          ) : null
        }
      </div>
    )
  }
}
